<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="部门名称">
              <a-input placeholder="请输入" v-model="queryParam.name"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchData">查询</a-button>
              <a-button style="margin-left: 8px" @click="clearSearchParam">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="createOrg">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <template slot="createTime" slot-scope="createTime">
        {{ createTime | moment }}
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleAdd(record)">新增</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">禁用</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>
    <org-create-modal ref="createModal" @ok="refreshData" @cancel="refreshData"/>
    <org-update-modal ref="updateModal" @ok="refreshData" @cancel="refreshData"/>
  </a-card>
</template>
<script>
  import { STable } from '@/components';
  import { getOrgTree } from '@/api/manage';
  import OrgCreateModal from './modules/OrgCreateModal';
  import OrgUpdateModal from './modules/OrgUpdateModal';

  export default {
    name: 'OrganizationList',
    components: {
      STable,
      OrgCreateModal,
      OrgUpdateModal
    },
    data() {
      return {
        // 查询条件参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '部门名称',
            dataIndex: 'name'
          },
          {
            title: '排序',
            dataIndex: 'sort'
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: true,
            scopedSlots: { customRender: 'createTime' }
          }, {
            title: '操作',
            width: '200px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('parameter', Object.assign(parameter, this.queryParam))
          return getOrgTree(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.data
            })
        },
        selectedRowKeys: [],
        selectedRows: []
    }
    },
    methods: {
      createOrg: function() {
        this.$refs.createModal.show(0)
      },
      handleEdit: function(record) {
        this.$refs.updateModal.show(record)
      },
      handleAdd: function(record) {
        this.$refs.createModal.show(record.id)
      },
      searchData: function () {
        this.$refs.table.refresh(true)
      },
      clearSearchParam: function () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      refreshData: function () {
        this.clearSearchParam()
      }
    }
  }
</script>

<style scoped>

</style>
